<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片放大</title>
    <style>
        img{
            width: 200px;
        }
        .container{
            border: 1px solid red;
        }
        .border{
            display: inline-block;
            padding: 10px;
            border: 1px solid green;
        }
    </style>
    <script src="dist.js"></script>
</head>
<body>
    <h2>使用代码</h2>
    <pre>
    // 初始化
    imgScale.init({
        // container 只有此容器下的图片会被去获取, 为空将会获取全页面的img
        container: '.container',
        // 只有拥有此类的img才会被获取, 如果为空将会获取容器下所有的ung
        class: '.img',
        // 放大scale 直接显示show 默认scale
        type: 'scale',
        // area放大区域(可视区), 默认76%
        area: "0.76",
        // pointer手势 默认开启
        cursor: true,
        // 动画播放速度 默认200 ms
        time: '200',
        // 手机端下的设置
        phone: {
            // 判定宽度为多少时为手机端
            width: "800",
            // 手机端下的宽度
            area: "1"
        }
        // 点击图片放大时回调
        start(){
            console.log('放大');
        },
        // 点击图片缩小后回调
        end(){
            console.log('缩小');
        }
    });
    </pre>

    <h2>.container容器</h2>
    <div class="container">
        <img src="123.png" alt="">
        <img src="111.png" alt="">

        <h3>.img的img元素</h3>
        <div class="border">
            <img class="img" src="gamersky_01origin_01_20174222051E65.jpg" alt="">
        </div>
        <img src="gamersky_01origin_01_20174222051E65.jpg" alt="">
        <img src="gamersky_01origin_01_20174222051E65.jpg" alt="">
    </div>

    <h2>.img的元素</h2>
    <img class="img" src="gamersky_01origin_01_20174222051E65.jpg" alt="">


    <script>
        // 初始化
        imgScale.init({
            // container 只有此容器下的图片会被去获取, 为空将会获取全页面的img
            container: '.container',
            // 只有拥有此类的img才会被获取, 如果为空将会获取容器下所有的ung
            class: '.img',
            // 放大scale 直接显示show 默认scale
            type: 'scale',
            // area放大区域(可视区), 默认86%
            area: "0.86",
            // pointer手势 默认开启
            cursor: true,
            // 动画播放速度 默认200 ms
            time: '200',
            phone: {
                // 判定宽度为多少时为手机端
                width: "800",
                // 手机端下的宽度
                area: "1"
            },
            // 点击图片放大时回调
            start(){
                console.log('放大');
            },
            // 点击图片缩小后回调
            end(){
                console.log('缩小');
            }
        });
    </script>
</body>
</html>